<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="../os_route.html">
<link rel="import" href="../../router.html">
<link rel="import" href="../../settings_shared_css.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/localized_link/localized_link.html">
<link rel="import" href="../route_origin_behavior.html">
<link rel="import" href="multidevice_constants.html">
<link rel="import" href="multidevice_feature_behavior.html">
<link rel="import" href="multidevice_feature_toggle.html">

<dom-module id="settings-multidevice-feature-item">
  <template>
    <style include="settings-shared">
      :host([is-sub-feature]) #feature-icon {
        display: none;
      }

      :host([is-sub-feature]) .settings-box .middle {
        padding-inline-start: 64px;
      }

      #card {
        border-top: var(--cr-separator-line);
        border-top-style: var(--feature-item-border-top-style, solid);
        padding: var(--feature-item-row-padding);
      }

      #feature-icon {
        padding: 2px;
      }

      cr-policy-indicator {
        padding: 0 var(--cr-controlled-by-spacing);
      }

      #help-icon:active {
        /* Still reveal tooltip on click. */
        pointer-events: none;
      }
    </style>
    <div id="card" class="settings-box two-line no-padding">
      <div id="linkWrapper" class="link-wrapper"
           actionable$="[[isRowClickable_(
               feature, pageContentData, subpageRoute)]]"
           on-click="handleItemClick_">
        <template is="dom-if" if="[[!isFeatureIconHidden]]">
          <slot name="icon">
            <iron-icon id="feature-icon" icon="[[getIconName(feature)]]"
                aria-hidden="true">
            </iron-icon>
          </slot>
        </template>
        <div id="item-text-container"
          class$="[[getItemTextContainerClassName_(isFeatureIconHidden)]]" 
          aria-hidden="true">
          <div id="featureName">[[getFeatureName(feature)]]</div>
          <slot name="feature-summary">
            <localized-link
                class="secondary"
                id="featureSecondary"
                localized-string="[[getFeatureSummaryHtml(feature)]]">
            </localized-link>
          </slot>
        </div>
        <template is="dom-if"
            if="[[hasSubpageClickHandler_(feature, pageContentData,
                      subpageRoute)]]"
                  restamp>
          <cr-icon-button id="subpageButton" class="subpage-arrow"
              aria-labelledby="featureName" aria-describedby="featureSecondary"
              aria-roledescription="$i18n{subpageArrowRoleDescription}">
          </cr-icon-button>
        </template>
        <template is="dom-if" if="[[infoTooltip]]" restamp>
          <iron-icon id="help-icon" tabindex="0" icon="cr:info-outline"
              aria-labelledby="tooltip">
          </iron-icon>
          <paper-tooltip id="tooltip" for="help-icon" position="top"
              aria-hidden="true" fit-to-visible-bounds>
            [[infoTooltip]]
          </paper-tooltip>
        </template>
      </div>
      <template is="dom-if"
          if="[[shouldShowSeparator_(
                    feature, pageContentData, subpageRoute)]]"
                restamp>
        <div class="separator"></div>
      </template>

      <template is="dom-if"
          if="[[!isFeatureAllowedByPolicy(feature, pageContentData)]]"
          restamp>
        <cr-policy-indicator indicator-type="userPolicy"></cr-policy-indicator>
      </template>
      <div class="margin-matches-padding" aria-labelledby="featureName"
          aria-describedby="featureSecondary">
        <!-- The aria-labelledby and aria-describedby are used by custom slotted
        content, without which ChromeVox will not announce the #featureName
        or #featureSummary. Note that the default slotted content still needs
        their own aria-labelledby and aria-describedby attributes. -->
        <slot name="feature-controller">
          <!-- This settings-multidevice-feature-toggle is the default
          controller. If an element with slot="feature-controller" is attached,
          it will replace this one. -->
          <settings-multidevice-feature-toggle
              aria-labelledby="featureName"
              aria-describedby="featureSecondary"
              feature="[[feature]]"
              page-content-data="[[pageContentData]]">
          </settings-multidevice-feature-toggle>
        </slot>
      </div>
    </div>
  </template>
  <script src="multidevice_feature_item.js"></script>
</dom-module>
